<template>
    <v-app id="inspire">
        <v-navigation-drawer v-model="drawer" app>
            <v-list dense>
                <v-list-item link @click="goHome">
                    <v-list-item-action>
                        <v-icon>mdi-home</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>首页</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link>
                    <v-list-item-action>
                        <v-icon>mdi-contact-mail</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>联系我们</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-app-bar app color="indigo" dark dense>
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title>仁爱招聘网</v-toolbar-title>
            <v-spacer></v-spacer>
            <div v-if="!isLogged">
                <v-btn @click="goLogin" icon large>
                    <span>登录</span>
                </v-btn>
                <v-btn @click="" icon large>
                    <span>注册</span>
                </v-btn>
            </div>
            <div v-else>
                <v-btn color="indigo" large>
                    <span>{{sysUser.username}}</span>
                </v-btn>
                <v-btn @click="doLogout" color="indigo" large>
                    <span>注销</span>
                </v-btn>
            </div>
        </v-app-bar>

        <v-content>
            <v-container fill-height fluid>
                <v-layout>
                    <router-view style="margin:0 auto;"></router-view>
                </v-layout>
            </v-container>
        </v-content>
    </v-app>
</template>

<script>
    export default {
        name: 'App',
        data: () => ({
            drawer: null,
            sysUser: null,
            isLogged: false
        }),
        mounted() {
            window.addEventListener('setItem', (e) => {
                this.testLogin();
            });
            this.testLogin();
        },
        watch: {
            sysUser(val) {
                if (val !== '' && val !== undefined && val !== null) {
                    this.isLogged = true;
                }
            }
        },
        methods: {
            goHome() {
                this.$router.push({path: "/"})
            },
            goLogin() {
                this.$router.push({path: "/login"})
            },
            doLogout() {
                this.$axios({
                    method: 'get',
                    url: 'http://localhost:8080/logout',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-auth-token': localStorage.getItem("x-auth-token")
                    },
                }).then((res) => {
                    console.log(JSON.stringify(res.data));
                    localStorage.removeItem("x-auth-token");
                    localStorage.removeItem("sysUser");
                    this.$router.go(0)
                });
            },
            testLogin(){
                this.sysUser = JSON.parse(localStorage.getItem('sysUser'));
                if (this.sysUser !== '' && this.sysUser !== undefined && this.sysUser !== null) {
                    this.$axios({
                        method: 'get',
                        url: 'http://localhost:8080/api/test/testToken',
                        headers: {
                            'Content-Type': 'application/json',
                            'x-auth-token': localStorage.getItem("x-auth-token")
                        },
                    }).then((res) => {
                        if (res.data===200){
                            this.isLogged = true;
                        }
                    }).catch((err)=>{
                        if (err.message.indexOf("401")!==-1){
                            alert("登录态失效，请重新登录！");
                            localStorage.removeItem("x-auth-token");
                            localStorage.removeItem("sysUser");
                            this.$router.go(0)
                        }
                    });
                }
            }
        },
    };
</script>
